<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .center{
        width: 1100px;
        height: 500px;
        display: flex;
        background-color: skyblue;
    }
    .center .left{
        margin-top: 5px;
        margin-right: 10px;
    }
    .center .left .leftBox{
        background-color: purple;
        width: 205px;
        height: 490px;
        flex-direction: column;
    }
    .center .right{
        flex-wrap: wrap;
        flex-direction:row;
        display: flex;
    }
    .rightBox{
        margin-right: 5px;
        margin-top: 5px;
        width: 215px;
        height: 240px;
        background-color: rebeccapurple;
    }
</style>
<body>
<div class="center">
    <div class="left">
     <div class="leftBox">0</div>
    </div>
    <div class="right">
        <div class="rightBox">1</div>
        <div class="rightBox">1</div>
        <div class="rightBox">1</div>
        <div class="rightBox">1</div>
        <div class="rightBox">1</div>
        <div class="rightBox">1</div>
        <div class="rightBox">1</div>
        <div class="rightBox">1</div>



    </div>
</div>
</body>
</html>